
<!DOCTYPE html>
<html class="no-js css-menubar" lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 移动设备 viewport -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui">
    <meta name="author" content="admui.com">
    <!-- 360浏览器默认使用Webkit内核 -->
    <meta name="renderer" content="webkit">
    <!-- 禁止搜索引擎抓取 -->
    <meta name="robots" content="nofollow">
    <!-- 禁止百度SiteAPP转码 -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <!-- Chrome浏览器添加桌面快捷方式（安卓） -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" type="image/png" href="../../../../public/images/favicon.png">
    <!-- Safari浏览器添加到主屏幕（IOS） -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Admui">
    <link rel="icon" sizes="192x192" href="../../../../public/images/apple-touch-icon.png">
    
    <!-- Win8标题栏及ICON图标 -->
    <meta name="msapplication-TileColor" content="#62a8ea">
    <meta name="msapplication-TileImage" content="../../../../public/images/app-icon72x72@2x.png">
    <link rel="apple-touch-icon-precomposed" href="../../../../public/images/apple-touch-icon.png">
    
    <!--[if lte IE 9]>
    <meta http-equiv="refresh" content="0; url='http://www.admui.com/ie'"/>
    <![endif]-->
    
    <title>模态框 - UI示例 - Admui</title>
    
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="../../../../public/themes/global/css/bootstrap.css">
    
    <!-- 字体图标 CSS -->
    <link rel="stylesheet" href="../../../../public/fonts/font-awesome/font-awesome.css">
    <link rel="stylesheet" href="../../../../public/fonts/web-icons/web-icons.css">
    
    <!-- Site CSS -->
    <link rel="stylesheet" href="../../../../public/themes/base/css/site.css" id="admui-siteStyle">
    
    <!-- 插件 CSS -->
    <link rel="stylesheet" href="../../../../public/vendor/animsition/animsition.css">
    <link rel="stylesheet" href="../../../../public/vendor/toastr/toastr.css">
    <link rel="stylesheet" href="../../../../public/vendor/mCustomScrollbar/jquery.mCustomScrollbar.css">
    
    <!-- Page CSS -->
    <link rel="stylesheet" href="../../../../public/css/examples/components/basic/modals.css">
    
    <!-- 插件 -->
    <script src="../../../../public/vendor/jquery/jquery.min.js"></script>
    <script src="../../../../public/vendor/bootstrap/bootstrap.bundle.min.js"></script>
    <script src="../../../../public/vendor/lodash/lodash.min.js"></script>
    <script src="../../../../public/vendor/breakpoints/breakpoints.min.js"></script>
    
    <!--[if lt IE 10]>
    <script src="../../../../public/vendor/media-match/media.match.min.js"></script>
    <script src="../../../../public/vendor/respond/respond.min.js"></script>
    <![endif]-->
    
    <!-- 核心 -->
    <script src="../../../../public/themes/global/js/core.js"></script>
    <script src="../../../../public/themes/global/js/configs/site-configs.js"></script>
    <script src="../../../../public/themes/global/js/components.js"></script>
    <script src="../../../../public/themes/base/js/site.js"></script>
    
    <script>
        'use strict';
        Breakpoints();
    </script></head>
<body class="site-menubar-unfold " data-theme="base">

<nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-inverse" id="admui-siteNavbar" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggler hamburger hamburger-close navbar-toggler-left hided" data-toggle="menubar">
            <span class="sr-only">切换菜单</span>
            <span class="hamburger-bar"></span>
        </button>
        <button type="button" class="navbar-toggler collapsed" data-target="#admui-navbarCollapse" data-toggle="collapse">
            <i class="icon wb-more-horizontal" aria-hidden="true"></i>
        </button>
        <div class="navbar-brand navbar-brand-center site-gridmenu-toggle" data-toggle="gridmenu">
            <img class="navbar-brand-logo d-sm-block d-lg-block d-none navbar-logo" src="../../../../public/images/logo-white.svg"
                title="Admui">
            <img class="navbar-brand-logo d-sm-none navbar-logo-mini" src="../../../../public/images/logo-white-min.svg" title="Admui">
        </div>
    </div>

    <div class="navbar-container container-fluid">
        <div class="collapse navbar-collapse navbar-collapse-toolbar" id="admui-navbarCollapse">
            <ul class="nav navbar-toolbar navbar-left">
                <li class="nav-item hidden-float" id="toggleMenubar">
                    <a class="nav-link" data-toggle="menubar" href="javascript:;" role="button" id="admui-toggleMenubar">
                        <i class="icon hamburger hamburger-arrow-left">
                            <span class="sr-only">切换目录</span>
                            <span class="hamburger-bar"></span>
                        </i>
                    </a>
                </li>
                <li class="navbar-menu nav-tabs-horizontal nav-tabs-animate is-load" id="admui-navMenu">
                    <ul class="nav navbar-toolbar nav-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" data-toggle="tab" href="#admui-navTabsItem-2" aria-controls="admui-navTabsItem-2"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-library"></i>
                                <span>UI 示例</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#admui-navTabsItem-3" aria-controls="admui-navTabsItem-3"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-desktop"></i>
                                <span>页面示例</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#admui-navTabsItem-4" aria-controls="admui-navTabsItem-4"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-table"></i>
                                <span>表格示例</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#admui-navTabsItem-5" aria-controls="admui-navTabsItem-5"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-order"></i>
                                <span>表单示例</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#admui-navTabsItem-6" aria-controls="admui-navTabsItem-6"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-pie-chart"></i>
                                <span>统计图表</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#admui-navTabsItem-7" aria-controls="admui-navTabsItem-7"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-menu"></i>
                                <span>菜单示例</span>
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" data-toggle="tab" href="#admui-navTabsItem-8" aria-controls="admui-navTabsItem-8"
                                role="tab" aria-expanded="false">
                                <i class="icon wb-settings"></i>
                                <span>系统管理</span>
                            </a>
                        </li>
                        <li class="nav-item dropdown" id="admui-navbarSubMenu">
                            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="javascript:;"
                                data-animation="slide-bottom">
                                更多
                            </a>
                            <div class="dropdown-menu">
                                <a class="dropdown-item no-menu" href="/html/site-map.html">
                                    <i class="icon wb-list-numbered"></i>
                                    <span>网站地图</span>
                                </a>
                                <a class="dropdown-item no-menu" href="/html/system/menu.html">
                                    <i class="icon wb-wrench"></i>
                                    <span>菜单管理</span>
                                </a>
                            </div>
                        </li>
                    </ul>
                </li>
            </ul>
            <ul class="nav navbar-toolbar navbar-right navbar-toolbar-right">
                <li class="nav-item dropdown" id="admui-navbarUser">
                    <a class="nav-link navbar-avatar" data-toggle="dropdown" href="javascript:;" aria-expanded="false"
                        data-animation="scale-up" role="button">
                        <span class="avatar avatar-online">
                            <img src="../../../../public/images/avatar.svg" alt="...">
                            <i></i>
                        </span>
                    </a>
                    <div class="dropdown-menu" role="menu">
                        <a class="dropdown-item" href="/html/system/account.html?tab=display" role="menuitem">
                            <i class="icon wb-layout" aria-hidden="true"></i>
                            <span>显示设置</span>
                        </a>
                        <a class="dropdown-item" href="/html/system/account.html?tab=password" role="menuitem">
                            <i class="icon wb-pencil" aria-hidden="true"></i>
                            <span>修改密码</span>
                        </a>
                        <a class="dropdown-item" href="/html/system/account.html" role="menuitem">
                            <i class="icon wb-settings" aria-hidden="true"></i>
                            <span>账户信息</span>
                        </a>
                        <div class="dropdown-divider" role="presentation"></div>
                        <a class="dropdown-item" href="/html/login.html" role="menuitem">
                            <i class="icon wb-power"></i>
                            <span>退出</span>
                        </a>
                    </div>
                </li>
                <li class="nav-item dropdown" id="admui-navbarMessage">
                    <a class="nav-link msg-btn" data-toggle="dropdown" href="javascript:;" aria-expanded="false"
                        data-animation="scale-up" role="button">
                        <i class="icon wb-bell" aria-hidden="true"></i>
                        <span class="badge badge-danger up msg-num"></span>
                    </a>
                    <ul class="dropdown-menu dropdown-menu-right dropdown-menu-media" role="menu">
                        <li class="dropdown-menu-header" role="presentation">
                            <h5>最新消息</h5>
                            <span class="badge badge-round label-danger"></span>
                        </li>
                        <li class="list-group" role="presentation">
                            <div class="navbar-message-content h-250" data-plugin="mCustomScrollbar">
                                <div id="admui-messageContent"></div>
                            </div>
                            <script type="text/html" id="admui-messageTpl">
                                <% if (msgList.length < 1) { %>
                                <p class="text-center h-200 vertical-align">
                                    <small class="vertical-align-middle opacity-four">没有新消息</small>
                                </p>
                                <% } else { %>
                                <% for(var i = 0; i < msgList.length; i++){ %>
                                <% var item = msgList[i]; %>
                                <a class="list-group-item" href="#" data-message-id="<%= item.messageId %>"
                                   data-title="<%= item.title %>"
                                   data-content="<%= item.content %>" role="menuitem">
                                    <div class="media">
                                        <div class="pr-10">
                                            <i class="icon <%= $imports.iconType(item.messageId) %> white icon-circle"
                                               aria-hidden="true"></i>
                                        </div>
                                        <div class="media-body">
                                            <h6 class="media-heading"><%= item.title %></h6>
                                            <time class="media-meta" datetime="<%= item.sendTime %>">
                                                <%= $imports.timeMsg(item.sendTime) %>
                                            </time>
                                        </div>
                                    </div>
                                </a>
                                <% } %>
                                <% } %>
                            </script>
                        </li>
                        <div class="dropdown-menu-footer" role="presentation">
                            <a class="dropdown-item" href="/html/system/account.html?tab=message" role="menuitem">
                                <i class="icon fa-navicon"></i>所有消息
                            </a>
                        </div>
                    </ul>
                </li>
                <li class="nav-item d-none d-sm-block" id="admui-navbarDisplay" data-toggle="tooltip" data-placement="bottom"
                    title="设置主题与布局等">
                    <a class="nav-link" href="/html/system/settings/display.html">
                        <i class="icon wb-layout"></i>
                        <span class="sr-only">主题与布局</span>
                    </a>
                </li>
                <li class="nav-item d-none d-sm-block" id="admui-navbarFullscreen" data-toggle="tooltip" data-placement="bottom"
                    title="全屏">
                    <a class="nav-link" href="javascript:;" role="button">
                        <i class="icon icon-fullscreen"></i>
                        <span class="sr-only">全屏</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</nav>
<nav class="site-menubar" id="admui-siteMenubar">
    <div class="site-menubar-body">
        <div class="tab-content h-full" id="admui-navTabs">
            <div class="tab-pane animation-fade h-full active" id="admui-navTabsItem-2" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">UI 示例</li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-laptop" aria-hidden="true"></i>
                            <span class="site-menu-title">布局</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">栅格</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/grids.html">
                                            <span class="site-menu-title">基本栅格</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/layout-grid.html">
                                            <span class="site-menu-title">布局栅格</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">标题栏</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/headers.html">
                                            <span class="site-menu-title">普通</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/bordered-header.html">
                                            <span class="site-menu-title">带边框</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">侧边栏</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/aside/left-static.html">
                                            <span class="site-menu-title">左侧普通</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/aside/left-fixed.html">
                                            <span class="site-menu-title">左侧浮动</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/aside/right-static.html">
                                            <span class="site-menu-title">右侧普通</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/layouts/aside/left-fixed.html">
                                            <span class="site-menu-title">右侧浮动</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/layouts/boxed.html">
                                    <span class="site-menu-title">盒式布局</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/layouts/two-columns.html">
                                    <span class="site-menu-title">两栏式布局</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/layouts/panel-transition.html">
                                    <span class="site-menu-title">面板动画</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-cube" aria-hidden="true"></i>
                            <span class="site-menu-title">基本</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">面板</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/basic/panel/structure.html">
                                            <span class="site-menu-title">面板结构</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/basic/panel/actions.html">
                                            <span class="site-menu-title">面板操作</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/basic/panel/portlets.html">
                                            <span class="site-menu-title">面板组件</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/buttons.html">
                                    <span class="site-menu-title">按钮</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/icons.html">
                                    <span class="site-menu-title">矢量图标</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/dropdowns.html">
                                    <span class="site-menu-title">下拉菜单</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/list.html">
                                    <span class="site-menu-title">列表组</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/tooltip-popover.html">
                                    <span class="site-menu-title">气泡提示 &amp; 弹出框</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/modals.html">
                                    <span class="site-menu-title">模态框</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/tabs-accordions.html">
                                    <span class="site-menu-title">选项卡 &amp; 折叠面板</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/images.html">
                                    <span class="site-menu-title">图片</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/badges.html">
                                    <span class="site-menu-title">徽章</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/carousel.html">
                                    <span class="site-menu-title">轮播组件</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/typography.html">
                                    <span class="site-menu-title">排版</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/progress-bars.html">
                                    <span class="site-menu-title">进度条</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/colors.html">
                                    <span class="site-menu-title">配色方案</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/basic/utilities.html">
                                    <span class="site-menu-title">辅助类</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-cubes" aria-hidden="true"></i>
                            <span class="site-menu-title">进阶</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/tour.html">
                                    <span class="site-menu-title">新手指引</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/animation.html">
                                    <span class="site-menu-title">动画</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/lightbox.html">
                                    <span class="site-menu-title">灯箱</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/scrollbar.html">
                                    <span class="site-menu-title">滚动条</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/rating.html">
                                    <span class="site-menu-title">评分</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/context-menu.html">
                                    <span class="site-menu-title">右键菜单</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/alertify.html">
                                    <span class="site-menu-title">Alertify 弹框</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/masonry.html">
                                    <span class="site-menu-title">瀑布流布局</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">树形控件</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/advanced/tree/jstree.html">
                                            <span class="site-menu-title">JsTree</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/advanced/tree/treeview.html">
                                            <span class="site-menu-title">Treeview</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/toastr.html">
                                    <span class="site-menu-title">Toastr 通知</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/sortable-nestable.html">
                                    <span class="site-menu-title">拖动排序</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/advanced/bootbox-sweetalert.html">
                                    <span class="site-menu-title">弹层组件</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-plug" aria-hidden="true"></i>
                            <span class="site-menu-title">组件</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/alerts.html">
                                    <span class="site-menu-title">警告框</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/ribbon.html">
                                    <span class="site-menu-title">彩带</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/pricing-tables.html">
                                    <span class="site-menu-title">价目表</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/overlay.html">
                                    <span class="site-menu-title">遮罩</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/cover.html">
                                    <span class="site-menu-title">覆盖层</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">时间轴</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/structure/timeline/simple.html">
                                            <span class="site-menu-title">简单时间轴</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/components/structure/timeline/icons.html">
                                            <span class="site-menu-title">图标时间轴</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/step.html">
                                    <span class="site-menu-title">步骤条</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/comments.html">
                                    <span class="site-menu-title">评论</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/media.html">
                                    <span class="site-menu-title">媒体</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/chat.html">
                                    <span class="site-menu-title">聊天窗口</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/testimonials.html">
                                    <span class="site-menu-title">客户评价</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/nav.html">
                                    <span class="site-menu-title">导航</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/navbars.html">
                                    <span class="site-menu-title">导航条</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/blockquotes.html">
                                    <span class="site-menu-title">引用</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/pagination.html">
                                    <span class="site-menu-title">分页</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/structure/breadcrumbs.html">
                                    <span class="site-menu-title">包屑导航</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-address-card-o" aria-hidden="true"></i>
                            <span class="site-menu-title">卡片</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/components/cards/statistics.html">
                                    <span class="site-menu-title">统计</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/cards/data.html">
                                    <span class="site-menu-title">数据</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/cards/blog.html">
                                    <span class="site-menu-title">博客</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/cards/chart.html">
                                    <span class="site-menu-title">图表</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/cards/social.html">
                                    <span class="site-menu-title">社交</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/components/cards/weather.html">
                                    <span class="site-menu-title">天气</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="tab-pane animation-fade h-full" id="admui-navTabsItem-3" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">页面示例</li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-home" aria-hidden="true"></i>
                            <span class="site-menu-title">首页示例</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/home/index-v1.html">
                                    <span class="site-menu-title">首页示例 01</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/home/index-v2.html">
                                    <span class="site-menu-title">首页示例 02</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/home/ecommerce.html">
                                    <span class="site-menu-title">电商网站型</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/home/analytics.html">
                                    <span class="site-menu-title">数据统计型</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/home/team.html">
                                    <span class="site-menu-title">团队协作型</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-files-o" aria-hidden="true"></i>
                            <span class="site-menu-title">常用页面</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/blank.html">
                                    <span class="site-menu-title">空白页面</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/faq.html">
                                    <span class="site-menu-title">帮助文档</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/gallery-grid.html">
                                    <span class="site-menu-title">相册</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/search-result.html">
                                    <span class="site-menu-title">搜索</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/user.html">
                                    <span class="site-menu-title">客户列表</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/email.html">
                                    <span class="site-menu-title">邮件模板</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/general/code-editor.html">
                                    <span class="site-menu-title">代码编辑器</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/error.html">
                                    <span class="site-menu-title">错误页面</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/errors/no-auth.html">
                                    <span class="site-menu-title">没有权限</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/errors/maintenance.html">
                                    <span class="site-menu-title">网站维护中</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/locked.html">
                                    <span class="site-menu-title">锁屏页面</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-group" aria-hidden="true"></i>
                            <span class="site-menu-title">团队协作</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/calendar.html">
                                    <span class="site-menu-title">日历</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/notebook.html">
                                    <span class="site-menu-title">笔记</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/taskboard.html">
                                    <span class="site-menu-title">任务看板</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">知识库</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/pages/team/documents/articles.html">
                                            <span class="site-menu-title">列表</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/pages/team/documents/categories.html">
                                            <span class="site-menu-title">分类</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/pages/team/documents/article.html">
                                            <span class="site-menu-title">详情</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/forum.html">
                                    <span class="site-menu-title">论坛</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/message.html">
                                    <span class="site-menu-title">即时通讯</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/mailbox.html">
                                    <span class="site-menu-title">邮箱</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/pages/team/media.html">
                                    <span class="site-menu-title">文件管理</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">项目</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/pages/team/projects.html">
                                            <span class="site-menu-title">项目列表 01</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/pages/team/work.html">
                                            <span class="site-menu-title">项目列表 02</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="tab-pane animation-fade h-full" id="admui-navTabsItem-4" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">表格示例</li>
                    <li class="site-menu-item">
                        <a href="/html/examples/tables/basic/index.html">
                            <i class="site-menu-icon fa-table" aria-hidden="true"></i>
                            <span class="site-menu-title">基本表格</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/tables/treegrid/index.html">
                            <i class="site-menu-icon fa-sort-amount-asc" aria-hidden="true"></i>
                            <span class="site-menu-title">树形表格</span>
                        </a>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-list-alt" aria-hidden="true"></i>
                            <span class="site-menu-title">DataTables</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/basic-init/zero-configuration.html">
                                    <span class="site-menu-title">基本初始化</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/advanced-init/events-live.html">
                                    <span class="site-menu-title">高级初始化</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/data-sources/dom.html">
                                    <span class="site-menu-title">数据源</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/api/add-row.html">
                                    <span class="site-menu-title">API</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/ajax/simple.html">
                                    <span class="site-menu-title">AJAX</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/server-side/simple.html">
                                    <span class="site-menu-title">服务器模式</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/plug-ins/api.html">
                                    <span class="site-menu-title">插件</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/data-tables/others/fixed-header.html">
                                    <span class="site-menu-title">其他</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-list-alt" aria-hidden="true"></i>
                            <span class="site-menu-title">BootstrapTable</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/bootstrap-table/options/boolean-options.html">
                                    <span class="site-menu-title">选项</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/bootstrap-table/methods/getOptions.html">
                                    <span class="site-menu-title">方法</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/tables/bootstrap-table/extensions/export.html">
                                    <span class="site-menu-title">扩展</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="tab-pane animation-fade h-full" id="admui-navTabsItem-5" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">表单相关</li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/general.html">
                            <i class="site-menu-icon fa-circle-o" aria-hidden="true"></i>
                            <span class="site-menu-title">基本表单</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/material.html">
                            <i class="site-menu-icon fa-google" aria-hidden="true"></i>
                            <span class="site-menu-title">质感风格</span>
                        </a>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-toggle-off" aria-hidden="true"></i>
                            <span class="site-menu-title">高级表单元素</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/advanced/select.html">
                                    <span class="site-menu-title">下拉选择</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/advanced/tags-input.html">
                                    <span class="site-menu-title">标签输入</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/advanced/date-time.html">
                                    <span class="site-menu-title">日期时间</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/advanced/checkbox-radio.html">
                                    <span class="site-menu-title">复选框 &amp; 单选框</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/advanced/color-icon.html">
                                    <span class="site-menu-title">颜色 &amp; 图标</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/advanced/other.html">
                                    <span class="site-menu-title">其他</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/layouts.html">
                            <i class="site-menu-icon fa-indent" aria-hidden="true"></i>
                            <span class="site-menu-title">表单布局</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/wizard.html">
                            <i class="site-menu-icon fa-arrow-right" aria-hidden="true"></i>
                            <span class="site-menu-title">表单向导</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/validation.html">
                            <i class="site-menu-icon fa-check-square-o" aria-hidden="true"></i>
                            <span class="site-menu-title">表单验证</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/masks.html">
                            <i class="site-menu-icon fa-at" aria-hidden="true"></i>
                            <span class="site-menu-title">格式预设</span>
                        </a>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-list-alt" aria-hidden="true"></i>
                            <span class="site-menu-title">编辑器</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/editor/summernote.html">
                                    <span class="site-menu-title">文本编辑器</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/editor/markdown.html">
                                    <span class="site-menu-title">Markdown编辑器</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/forms/editor/ace.html">
                                    <span class="site-menu-title">代码编辑器</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/image-cropping.html">
                            <i class="site-menu-icon fa-cut" aria-hidden="true"></i>
                            <span class="site-menu-title">图片裁剪</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/forms/dropify.html">
                            <i class="site-menu-icon fa-cloud-upload" aria-hidden="true"></i>
                            <span class="site-menu-title">文件上传</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="tab-pane animation-fade h-full" id="admui-navTabsItem-6" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">统计图表</li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-pie-chart" aria-hidden="true"></i>
                            <span class="site-menu-title">简单图表</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/chartjs.html">
                                    <span class="site-menu-title">Chart.js</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/gauges.html">
                                    <span class="site-menu-title">Gauges</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/flot.html">
                                    <span class="site-menu-title">Flot</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/peity.html">
                                    <span class="site-menu-title">Peity</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/sparkline.html">
                                    <span class="site-menu-title">Sparkline</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/morris.html">
                                    <span class="site-menu-title">Morris</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/chartist.html">
                                    <span class="site-menu-title">Chartist.js</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/rickshaw.html">
                                    <span class="site-menu-title">Rickshaw</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/charts/c3.html">
                                    <span class="site-menu-title">C3</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/charts/echarts.html">
                            <i class="site-menu-icon fa-area-chart" aria-hidden="true"></i>
                            <span class="site-menu-title">百度 Echarts</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="tab-pane animation-fade h-full" id="admui-navTabsItem-7" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">菜单演示 01</li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-bars" aria-hidden="true"></i>
                            <span class="site-menu-title">一级菜单</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/examples/menu.html">
                                    <span class="site-menu-title">二级菜单 01</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/examples/menu.html">
                                    <span class="site-menu-title">二级菜单 02</span>
                                </a>
                            </li>
                            <li class="site-menu-item has-sub">
                                <a href="javascript:;">
                                    <span class="site-menu-title">二级菜单 03</span>
                                    <span class="site-menu-arrow"></span>
                                </a>
                                <ul class="site-menu-sub">
                                    <li class="site-menu-item">
                                        <a href="/html/examples/menu.html">
                                            <span class="site-menu-title">三级菜单 001</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/menu.html">
                                            <span class="site-menu-title">三级菜单 002</span>
                                        </a>
                                    </li>
                                    <li class="site-menu-item">
                                        <a href="/html/examples/menu.html">
                                            <span class="site-menu-title">三级菜单 003</span>
                                        </a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/examples/menu.html">
                            <i class="site-menu-icon fa-bars" aria-hidden="true"></i>
                            <span class="site-menu-title">独立菜单</span>
                        </a>
                    </li>
                    <li class="site-menu-category">菜单演示 02</li>
                    <li class="site-menu-item">
                        <a href="/html/examples/menu.html">
                            <i class="site-menu-icon fa-bars" aria-hidden="true"></i>
                            <span class="site-menu-title">独立菜单</span>
                        </a>
                    </li>
                </ul>
            </div>
            <div class="tab-pane animation-fade h-full" id="admui-navTabsItem-8" role="tabpanel">
                <ul class="site-menu">
                    <li class="site-menu-category">系统信息</li>
                    <li class="site-menu-item">
                        <a href="/html/system/menu.html">
                            <i class="site-menu-icon fa-bars" aria-hidden="true"></i>
                            <span class="site-menu-title">菜单管理</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/system/organization.html">
                            <i class="site-menu-icon fa-sitemap" aria-hidden="true"></i>
                            <span class="site-menu-title">组织结构</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/system/role.html">
                            <i class="site-menu-icon fa-sliders" aria-hidden="true"></i>
                            <span class="site-menu-title">角色管理</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/system/permission.html">
                            <i class="site-menu-icon fa-user-secret" aria-hidden="true"></i>
                            <span class="site-menu-title">权限管理</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/system/log.html">
                            <i class="site-menu-icon fa-file-text-o" aria-hidden="true"></i>
                            <span class="site-menu-title">日志信息</span>
                        </a>
                    </li>
                    <li class="site-menu-item">
                        <a href="/html/system/blacklist.html">
                            <i class="site-menu-icon fa-shield" aria-hidden="true"></i>
                            <span class="site-menu-title">黑名单</span>
                        </a>
                    </li>
                    <li class="site-menu-item has-sub">
                        <a href="javascript:;">
                            <i class="site-menu-icon fa-gear" aria-hidden="true"></i>
                            <span class="site-menu-title">系统设置</span>
                            <span class="site-menu-arrow"></span>
                        </a>
                        <ul class="site-menu-sub">
                            <li class="site-menu-item">
                                <a href="/html/system/settings/display.html">
                                    <span class="site-menu-title">显示设置</span>
                                </a>
                            </li>
                            <li class="site-menu-item">
                                <a href="/html/system/settings/log.html">
                                    <span class="site-menu-title">日志设置</span>
                                </a>
                            </li>
                        </ul>
                    </li>
                    <li class="site-menu-category">我的账户</li>
                    <li class="site-menu-item">
                        <a href="/html/system/account.html">
                            <i class="site-menu-icon fa-key" aria-hidden="true"></i>
                            <span class="site-menu-title">账户信息</span>
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>
<main class="site-page">
    <div class="page-container" id="admui-pageContent">
<div class="page animation-fade">
    <div class="page-header">
        <h1 class="page-title">模态框</h1>
    </div>
    <div class="page-content">

        <div class="panel">
            <div class="panel-heading">
                <h3 class="panel-title">模态框样式</h3>
            </div>
            <div class="panel-body container-fluid">
                <div class="row row-lg">
                    <div class="col-lg-6 col-md-12">
                        <div class="example-wrap">
                            <div class="example example-modal">

                                <div class="modal">
                                    <div class="modal-dialog m-50">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                                                    <span aria-hidden="true">×</span>
                                                </button>
                                                <h4 class="modal-title">模态框标题</h4>
                                            </div>
                                            <div class="modal-body">
                                                <p>
                                                    大众汽车公司周二宣布，将向北美商用车及发动机巨头纳威司达国际公司注资2.56亿美元，收购该公司16.6%的股权。根据协议，大众将为每股纳威司达股票支付15.76美元，较该股上周五收盘价溢价12%。大众还将获得纳威司达董事会的两个席位。纳威司达表示，预计此项交易将使其在5年内每年节约成本2亿美元。</p>
                                            </div>
                                            <div class="modal-footer">
                                                <button type="button" class="btn btn-primary mt-5" data-dismiss="modal">保存</button>
                                                <button type="button" class="btn btn-default mt-5" data-dismiss="modal">
                                                    关闭
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                            </div>
                        </div>
                    </div>
                    <div class="col-lg-6 col-md-12">

                        <div class="example-wrap">
                            <h4 class="example-title">基本</h4>
                            <p>
                                模态框是覆盖在父窗体上的子窗体。通常，目的是显示来自一个单独的源的内容，可以在不离开父窗体的情况下有一些互动。子窗体可提供信息、交互等模态框很容易实现，但请谨慎使用，因为模态框会阻断用户与页面的交互。您可以使用以下在模态框上使用以下动画效果。</p>
                            <div class="example example-buttons">
                                <button class="btn btn-outline btn-default" data-target="#exampleNiftyFadeScale"
                                    data-toggle="modal" type="button">
                                    Fade in &amp; Scale
                                </button>
                                <button class="btn btn-outline btn-default" data-target="#exampleNiftySlideFromRight"
                                    data-toggle="modal" type="button">
                                    Slide from right
                                </button>
                                <button class="btn btn-outline btn-default" data-target="#exampleNiftySlideFromBottom"
                                    data-toggle="modal" type="button">
                                    Slide from bottom
                                </button>
                                <button class="btn btn-outline btn-default" data-target="#exampleNiftyNewspaper"
                                    data-toggle="modal" type="button">
                                    Newspaper
                                </button>
                                <button class="btn btn-outline btn-default" data-target="#exampleNiftyFall" data-toggle="modal"
                                    type="button">
                                    Fall
                                </button>
                                <button class="btn btn-outline btn-default" data-target="#exampleNiftySideFall"
                                    data-toggle="modal" type="button">
                                    Slide Fall
                                </button>
                                <button class="btn btn-outline btn-default" data-target="#exampleNiftyFlipHorizontal"
                                    data-toggle="modal" type="button">
                                    3D Flip horizontal
                                </button>
                                <button class="btn btn-outline btn-default" data-target="#exampleNiftyFlipVertical"
                                    data-toggle="modal" type="button">
                                    3D Flip vertical
                                </button>
                                <button class="btn btn-outline btn-default" data-target="#exampleNifty3dSign"
                                    data-toggle="modal" type="button">
                                    3D Sign
                                </button>
                                <button class="btn btn-outline btn-default" data-target="#exampleNiftySuperScaled"
                                    data-toggle="modal" type="button">
                                    Super Scalled
                                </button>
                                <button class="btn btn-outline btn-default" data-target="#exampleNiftyJustMe"
                                    data-toggle="modal" type="button">
                                    Just Me
                                </button>
                                <button class="btn btn-outline btn-default" data-target="#exampleNifty3dSlit"
                                    data-toggle="modal" type="button">
                                    3D Slit
                                </button>
                                <button class="btn btn-outline btn-default" data-target="#exampleNifty3dRotateBottom"
                                    data-toggle="modal" type="button">
                                    3D Rotate Bottom
                                </button>
                                <button class="btn btn-outline btn-default" data-target="#exampleNifty3dRotateInLeft"
                                    data-toggle="modal" type="button">
                                    3D Rotate In Left
                                </button>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="row row-lg">
                    <div class="col-lg-12">
                        <div class="example-wrap">
                            <h4 class="example-title">显示位置</h4>
                            <div class="row row-lg">
                                <div class="col-lg-3 col-sm-6">

                                    <div class="example-wrap">
                                        <h4 class="example-title">顶部</h4>
                                        <div class="example">
                                            <div class="example-well h-250 example-modal-top">
                                                <img class="center" src="../../../../public/images/modal/modal-position.png"
                                                    alt="...">
                                            </div>
                                            <button class="btn btn-primary" data-target="#examplePositionTop"
                                                data-toggle="modal" type="button">
                                                显示
                                            </button>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-lg-3 col-sm-6">

                                    <div class="example-wrap">
                                        <h4 class="example-title">居中</h4>
                                        <div class="example">
                                            <div class="example-well h-250">
                                                <img class="center" src="../../../../public/images/modal/modal-position.png"
                                                    alt="...">
                                            </div>
                                            <button class="btn btn-primary" data-target="#examplePositionCenter"
                                                data-toggle="modal" type="button">
                                                显示
                                            </button>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-lg-3 col-sm-6">

                                    <div class="example-wrap">
                                        <h4 class="example-title">底部</h4>
                                        <div class="example">
                                            <div class="example-well h-250 example-modal-bottom">
                                                <img class="center" src="../../../../public/images/modal/modal-position.png"
                                                    alt="...">
                                            </div>
                                            <button class="btn btn-primary" data-target="#examplePositionBottom"
                                                data-toggle="modal" type="button">
                                                显示
                                            </button>
                                        </div>
                                    </div>

                                </div>
                                <div class="col-lg-3 col-sm-6">

                                    <div class="example-wrap">
                                        <h4 class="example-title">侧边栏</h4>
                                        <div class="example">
                                            <div class="example-well h-250 example-modal-sidebar">
                                                <img class="center" src="../../../../public/images/modal/modal-position-sidebar.png"
                                                    alt="...">
                                            </div>
                                            <button class="btn btn-primary" data-target="#examplePositionSidebar"
                                                data-toggle="modal" type="button">
                                                显示
                                            </button>
                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row row-lg">
                    <div class="col-xl-4 col-lg-6">

                        <div class="example-wrap">
                            <h4 class="example-title">表单模态框</h4>
                            <div class="example">
                                <div class="example-well h-350">
                                    <img class="center" src="../../../../public/images/modal/form-modal.png" alt="...">
                                </div>
                                <button class="btn btn-primary" data-target="#exampleFormModal" data-toggle="modal"
                                    type="button">
                                    显示
                                </button>
                            </div>
                        </div>

                    </div>
                    <div class="col-xl-4 col-lg-6">

                        <div class="example-wrap">
                            <h4 class="example-title">大小</h4>
                            <div class="example">
                                <div class="example-well h-350">
                                    <img class="center" src="../../../../public/images/modal/size-modal.png" alt="...">
                                </div>
                                <div class="example-buttons">
                                    <button type="button" class="btn btn-primary" data-target=".example-modal-lg"
                                        data-toggle="modal">
                                        大尺寸
                                    </button>
                                    <button type="button" class="btn btn-primary" data-target=".example-modal-sm"
                                        data-toggle="modal">
                                        小尺寸
                                    </button>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-xl-4 col-lg-6">

                        <div class="example-wrap">
                            <h4 class="example-title">在模态框中显示选项卡</h4>
                            <div class="example">
                                <div class="example-well h-350">
                                    <img class="center" src="../../../../public/images/modal/tab-modal.png" alt="...">
                                </div>
                                <button class="btn btn-primary" data-target="#exampleTabs" data-toggle="modal" type="button">
                                    显示
                                </button>
                            </div>
                        </div>

                    </div>
                    <div class="col-xl-4 col-lg-6">

                        <div class="example-wrap">
                            <h4 class="example-title">在模态框中显示折叠面板</h4>
                            <div class="example">
                                <div class="example-well h-350">
                                    <img class="center" src="../../../../public/images/modal/accordion-modal.png" alt="...">
                                </div>
                                <button class="btn btn-primary" data-target="#exampleAccrodionModal" data-toggle="modal"
                                    type="button">
                                    显示
                                </button>
                            </div>
                        </div>

                    </div>
                    <div class="col-xl-4 col-lg-6">

                        <div class="example-wrap">
                            <h4 class="example-title">在模态框中显示栅格</h4>
                            <div class="example">
                                <div class="example-well h-350">
                                    <img class="center" src="../../../../public/images/modal/grid-modal.png" alt="...">
                                </div>
                                <button class="btn btn-primary" data-target="#exampleGrid" data-toggle="modal" type="button">
                                    显示
                                </button>
                            </div>
                        </div>

                    </div>
                    <div class="col-xl-4 col-lg-6">

                        <div class="example-wrap m-md-0">
                            <h4 class="example-title">不同样式</h4>
                            <div class="example">
                                <div class="example-well h-350">
                                    <img class="center" src="../../../../public/images/modal/style-modal.png" alt="...">
                                </div>
                                <div class="color-selector-wrap clearfix">
                                    <p class="pt-5 mr-20">选择不同颜色：</p>
                                    <ul class="color-selector">
                                        <li class="bg-primary-600">
                                            <input type="radio" id="inputStylePrimary" name="colorChosen" data-target="#exampleModalPrimary"
                                                data-toggle="modal">
                                            <label for="inputStylePrimary"></label>
                                        </li>
                                        <li class="bg-green-600">
                                            <input type="radio" id="inputStyleSuccess" name="colorChosen" data-target="#exampleModalSuccess"
                                                data-toggle="modal">
                                            <label for="inputStyleSuccess"></label>
                                        </li>
                                        <li class="bg-red-600">
                                            <input type="radio" id="inputStyleDanger" name="colorChosen" data-target="#exampleModalDanger"
                                                data-toggle="modal">
                                            <label for="inputStyleDanger"></label>
                                        </li>
                                        <li class="bg-orange-600">
                                            <input type="radio" id="inputStyleWarning" name="colorChosen" data-target="#exampleModalWarning"
                                                data-toggle="modal">
                                            <label for="inputStyleWarning"></label>
                                        </li>
                                        <li class="bg-cyan-600">
                                            <input type="radio" id="inputStyleInfo" name="colorChosen" data-target="#exampleModalInfo"
                                                data-toggle="modal">
                                            <label for="inputStyleInfo"></label>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>

                    </div>
                    <div class="col-xl-4 col-lg-6">

                        <div class="example-wrap">
                            <h4 class="example-title">全屏</h4>
                            <div class="example">
                                <div class="example-well h-350" style="background-color: #fff">
                                    <img class="center w-full" src="../../../../public/images/modal/fillin-modal.png" alt="...">
                                </div>
                                <button class="btn btn-primary" data-target="#exampleFillIn" data-toggle="modal" type="button">
                                    显示
                                </button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-fade-in-scale-up" id="exampleNiftyFadeScale" aria-hidden="true" aria-labelledby="exampleModalTitle"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default m-0" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-slide-in-right" id="exampleNiftySlideFromRight" aria-hidden="true" aria-labelledby="exampleModalTitle"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default m-0" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-slide-from-bottom" id="exampleNiftySlideFromBottom" aria-hidden="true" aria-labelledby="exampleModalTitle"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default m-0" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-newspaper" id="exampleNiftyNewspaper" aria-hidden="true" aria-labelledby="exampleModalTitle"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default m-0" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-fall" id="exampleNiftyFall" aria-hidden="true" aria-labelledby="exampleModalTitle" role="dialog"
    tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default m-0" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-side-fall" id="exampleNiftySideFall" aria-hidden="true" aria-labelledby="exampleModalTitle"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default m-0" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-3d-flip-horizontal" id="exampleNiftyFlipHorizontal" aria-hidden="true" aria-labelledby="exampleModalTitle"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default m-0" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-3d-flip-vertical" id="exampleNiftyFlipVertical" aria-hidden="true" aria-labelledby="exampleModalTitle"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default m-0" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-3d-sign" id="exampleNifty3dSign" aria-hidden="true" aria-labelledby="exampleModalTitle"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default m-0" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-super-scaled" id="exampleNiftySuperScaled" aria-hidden="true" aria-labelledby="exampleModalTitle"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default m-0" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-just-me" id="exampleNiftyJustMe" aria-hidden="true" aria-labelledby="exampleModalTitle"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default m-0" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-3d-slit" id="exampleNifty3dSlit" aria-hidden="true" aria-labelledby="exampleModalTitle"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default m-0" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-rotate-from-bottom" id="exampleNifty3dRotateBottom" aria-hidden="true" aria-labelledby="exampleModalTitle"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default m-0" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-rotate-from-left" id="exampleNifty3dRotateInLeft" aria-hidden="true" aria-labelledby="exampleModalTitle"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default m-0" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="examplePositionTop" aria-hidden="true" aria-labelledby="examplePositionTop" role="dialog"
    tabindex="-1">
    <div class="modal-dialog modal-top">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="exampleModalTitle">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="examplePositionCenter" aria-hidden="true" aria-labelledby="examplePositionCenter" role="dialog"
    tabindex="-1">
    <div class="modal-dialog modal-center">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="examplePositionBottom" aria-hidden="true" aria-labelledby="examplePositionBottom" role="dialog"
    tabindex="-1">
    <div class="modal-dialog modal-bottom">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="examplePositionSidebar" aria-hidden="true" aria-labelledby="examplePositionSidebar" role="dialog"
    tabindex="-1">
    <div class="modal-dialog modal-sidebar modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框… Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary btn-block" data-dismiss="modal">保存
                </button>
                <button type="button" class="btn btn-default btn-block" data-dismiss="modal">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="exampleFormModal" aria-hidden="false" aria-labelledby="exampleFormModalLabel" role="dialog"
    tabindex="-1">
    <div class="modal-dialog">
        <form class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="exampleFormModalLabel">在线反馈</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="row">
                        <div class="col-lg-4 form-group">
                            <input type="text" class="form-control" name="userName" placeholder="用户名">
                        </div>
                        <div class="col-lg-4 form-group">
                            <input type="email" class="form-control" name="email" placeholder="邮箱">
                        </div>
                        <div class="col-lg-4 form-group">
                            <input type="text" class="form-control" name="qq" placeholder="QQ号码">
                        </div>
                        <div class="col-lg-12 form-group">
                            <textarea class="form-control" rows="5" placeholder="请输入您要反馈内容"></textarea>
                        </div>
                        <div class="col-lg-12 form-group">
                            <button class="btn btn-primary btn-outline" data-dismiss="modal" type="button">
                                发送反馈
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </form>
    </div>
</div>

<div class="modal fade" id="exampleMultipleOne" aria-hidden="true" aria-labelledby="exampleMultipleOne" role="dialog"
    tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">第一个模态框</h4>
            </div>
            <div class="modal-body">
                <p>打开第二个模态框</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-target="#exampleMultipleTwo" data-toggle="modal"
                    data-dismiss="modal">开始</button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="exampleMultipleTwo" aria-hidden="false" role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">第二个模态框</h4>
            </div>
            <div class="modal-body">
                <p>继续</p>
            </div>
            <div class="modal-footer">
                <a class="btn btn-sm btn-white" data-dismiss="modal" href="javascript:;" role="button">关闭</a>
            </div>
        </div>
    </div>
</div>

<div class="modal fade example-modal-lg" aria-hidden="true" aria-labelledby="exampleOptionalLarge" role="dialog"
    tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="exampleOptionalLarge">大尺寸模态框</h4>
            </div>
            <div class="modal-body">
                我是一个大尺寸的模态框
            </div>
        </div>
    </div>
</div>


<div class="modal fade example-modal-sm" aria-hidden="true" aria-labelledby="exampleOptionalSmall" role="dialog"
    tabindex="-1">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="exampleOptionalSmall">小尺寸模态框</h4>
            </div>
            <div class="modal-body">
                我是一个小尺寸的模态框
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="exampleTabs" aria-hidden="true" aria-labelledby="exampleModalTabs" role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="exampleModalTabs">在模态框中显示选项卡</h4>
            </div>
            <ul class="nav nav-tabs nav-tabs-line" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active" data-toggle="tab" href="#exampleLine1" aria-controls="exampleLine1" role="tab">
                        最新
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#exampleLine2" aria-controls="exampleLine2" role="tab">
                        热门
                    </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#exampleLine3" aria-controls="exampleLine3" role="tab">
                        深度
                    </a>
                </li>
            </ul>
            <div class="modal-body">
                <div class="tab-content">
                    <div class="tab-pane active" id="exampleLine1" role="tabpanel">
                        国家新闻出版广电总局近日通知，
                        今后凡是涉及医疗、药品、医疗器械、保健品、食品、化妆品、美容等企业、产品或服务的广告，都不得以任何电视节目的形态变相发布，不得以电视购物短片广告形式播出，而且单条广告时长不得超过一分钟。(央视财经)
                    </div>
                    <div class="tab-pane" id="exampleLine2" role="tabpanel">
                        三星准备换掉所有召回手机中的电池，以保证用户安全。据来自韩国业界内部的消息称，未来新批次的Note
                        7还会彻底抛弃三星子公司SDI生产的电池，转投香港新能源科技有限公司。这次庞大的召回计划会让三星的10亿美元打了水漂，对其品牌形象的影响更是不可估量。
                    </div>
                    <div class="tab-pane" id="exampleLine3" role="tabpanel">
                        乐视网公告，6日，公司高级管理人员蒋晓琳、赵凯在二级市场合计买入公司66000股。蒋晓琳、赵凯表示，基于对公司未来发展前景的信心以及对公司当前股价走势的合理判断，对公司股票进行增持。
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="exampleAccrodionModal" aria-hidden="true" aria-labelledby="exampleAccrodionModal" role="dialog"
    tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="panel-group panel-group-continuous m-0" id="exampleAccrodion1" aria-multiselectable="true" role="tablist">
                <div class="panel">
                    <div class="panel-heading" id="exampleHeadingFirst" role="tab">
                        <a class="panel-title" data-parent="#exampleAccrodion1" data-toggle="collapse" href="#exampleCollapseFirst"
                            aria-controls="exampleCollapseFirst" aria-expanded="false">
                            <i class="md-palette"></i> 霍金"光帆飞行器"最后的结果很可能是尸骨无存
                        </a>
                    </div>
                    <div class="panel-collapse collapse in" id="exampleCollapseFirst" aria-labelledby="exampleHeadingFirst"
                        role="tabpanel">
                        <div class="panel-body">
                            2016年4月12日，物理学家史蒂芬·霍金与投资人尤里·米尔纳在纽约共同宣布了突破摄星（Breaktdivough
                            Starshot）项目正式启动。这项最终耗资可能达50-100亿美元的太空搜索项目，旨在研发名为“星片”（StarChip）的光帆飞行器，以期能以五分之一光速（每秒6万千米），经过约20年的航行时间抵达半人马座α星，并在到达后再经过约4年的时间向地球传回信息。
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="panel-heading" id="exampleHeadingSecond" role="tab">
                        <a class="panel-title collapsed" data-parent="#exampleAccrodion1" data-toggle="collapse" href="#exampleCollapseSecond"
                            aria-controls="exampleCollapseSecond" aria-expanded="false">
                            <i class="md-place"></i> 众友健康获天士力大健康产业基金5亿元投资
                        </a>
                    </div>
                    <div class="panel-collapse collapse" id="exampleCollapseSecond" aria-labelledby="exampleHeadingSecond"
                        role="tabpanel">
                        <div class="panel-body">
                            众友健康将获得天士力大健康产业基金5亿元投资，出让10%的股份。众友健康成立于1996年，据企业工商信息了解到，众友健康对外投资数十家医药大健康类企业。众友健康被称为是中国医药连锁“西北王”。
                        </div>
                    </div>
                </div>
                <div class="panel">
                    <div class="panel-heading" id="exampleHeadingThird" role="tab">
                        <a class="panel-title collapsed" data-parent="#exampleAccrodion1" data-toggle="collapse" href="#exampleCollapseThird"
                            aria-controls="exampleCollapseThird" aria-expanded="false">
                            <i class="md-loupe"></i> 掌上心电确认已获得先声药业数千万元A轮融资
                        </a>
                    </div>
                    <div class="panel-collapse collapse" id="exampleCollapseThird" aria-labelledby="exampleHeadingThird"
                        role="tabpanel">
                        <div class="panel-body">
                            接受此次注资之后，掌上心电会借助先声药业的资源优势，着力发展市场部分的工作。王长津坦言，此前掌上心电的市场运营投入和专业性都做的不够好，此次调整后，市场部门的人员配比也会有所增加。2014年9月掌上心电曾获得创新工场数百万美元的天使轮融资。
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" id="exampleGrid" aria-hidden="true" aria-labelledby="exampleGrid" role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">在模态框中显示栅格</h4>
            </div>
            <div class="modal-body">
                <div class="example-grid">
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="example-col">.col-lg-6</div>
                        </div>
                        <div class="col-lg-6">
                            <div class="example-col">.col-lg-6</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="example-col">.col-lg-6</div>
                        </div>
                        <div class="col-lg-6">
                            <div class="example-col">.col-lg-6</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="example-col">.col-lg-6</div>
                        </div>
                        <div class="col-lg-6">
                            <div class="example-col">.col-lg-6</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="example-col">.col-lg-6</div>
                        </div>
                        <div class="col-lg-6">
                            <div class="example-col">.col-lg-6</div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-lg-6">
                            <div class="example-col">.col-lg-6</div>
                        </div>
                        <div class="col-lg-6">
                            <div class="example-col">.col-lg-6</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-primary" id="exampleModalPrimary" aria-hidden="true" aria-labelledby="exampleModalPrimary"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-success" id="exampleModalSuccess" aria-hidden="true" aria-labelledby="exampleModalSuccess"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-danger" id="exampleModalDanger" aria-hidden="true" aria-labelledby="exampleModalDanger"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-warning" id="exampleModalWarning" aria-hidden="true" aria-labelledby="exampleModalWarning"
    role="dialog" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-info" id="exampleModalInfo" aria-hidden="true" aria-labelledby="exampleModalInfo" role="dialog"
    tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title">模态框标题</h4>
            </div>
            <div class="modal-body">
                <p>Hi，大家好，我是一个模态框…</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">保存</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消
                </button>
            </div>
        </div>
    </div>
</div>

<div class="modal fade modal-fill-in" id="exampleFillIn" aria-hidden="false" aria-labelledby="exampleFillIn" role="dialog"
    tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="关闭">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="exampleFillInModalTitle">在线反馈</h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="row">
                        <div class="col-lg-4 form-group">
                            <input type="text" class="form-control" name="userName" placeholder="用户名">
                        </div>
                        <div class="col-lg-4 form-group">
                            <input type="email" class="form-control" name="email" placeholder="邮箱">
                        </div>
                        <div class="col-lg-4 form-group">
                            <input type="text" class="form-control" name="qq" placeholder="QQ号码">
                        </div>
                        <div class="col-lg-12">
                            <textarea class="form-control" rows="5" placeholder="请输入您要反馈内容"></textarea>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
    </div>
</main>

<footer class="site-footer">
    <div class="site-footer-legal">上海畅控 &copy;
        <a href="http://www.admui.com" target="_blank">admui.com</a>
    </div>
    <div class="site-footer-right">
        当前版本：v2.1.0 (更新于2019-4-11)
        <a class="ml-5" data-toggle="tooltip" title="购买或升级" href="http://www.admui.com/buy" target="_blank">
            <i class="icon fa-cloud-upload"></i>
        </a>
    </div>
</footer>
<!-- 插件 -->
<script src="../../../../public/themes/global/js/plugins/responsive-tabs.js"></script>
<script src="../../../../public/vendor/artTemplate/template-web.js"></script>
<script src="../../../../public/vendor/toastr/toastr.min.js"></script>
<script src="../../../../public/vendor/ashoverscroll/jquery-asHoverScroll.min.js"></script>
<script src="../../../../public/vendor/mCustomScrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="../../../../public/vendor/screenfull/screenfull.min.js"></script>
<script src="../../../../public/vendor/bootbox/bootbox.min.js"></script>

<!-- 消息通知 -->
<script src="../../../../public/js/notify-msg.js"></script>

<!-- Page JS -->

</body>
</html>